{% extends 'base.html' %}
{% load staticfiles %}

{% block title %}资产总表{% endblock %}

{% block css %}

<!-- DataTables -->
  <link rel="stylesheet" href="{% static 'bower_components/datatables.net-bs/css/dataTables.bootstrap.css' %}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="{% static 'dist/css/skins/_all-skins.min.css' %}">

{% endblock %}


{% block content %}

<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
    资产总表
    <small>assets list</small>
  </h1>
  <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
    <li class="active">资产总表</li>
  </ol>
</section>

<section class="content">
<div class="row">
  <div class="col-xs-12">
    <div class="col-sm-3" style="float:right;text-align: right;">

        <div class="input-group">
            <input type="text" class="form-control" id="search_input" name="keyword" value="{{ keyword }}"
                   placeholder="Search">
            <span class="input-group-btn"><button id='search_btn' type="button" class="btn btn-info btn-flat">
              - 搜索 -
        </button></span>
        </div>

{#        <form action="{% url 'asset:search' %}" method="get" class="navbar-form  pull-right  ">#}
{##}
{#            <input type="search" name='key' placeholder="搜索 ..." class="form-control ">#}
{##}
{#            <button type="submit">#}
{#                <span class="glyphicon glyphicon-search "></span>#}
{#            </button>#}
{#        </form>#}


    </div>



    <div class="box-body">
      <div class="dataTables_wrapper form-inline dt-bootstrap">
        <table class="table table-striped table-bordered table-hover " id="editable" name="editable">
          <thead>
              <tr>

                  <th class="text-center"> 主机名 </th>
                  <th class="text-center"> IP地址 </th>
                  <th class="text-center"> cpu </th>
                  <th class="text-center"> 内存 </th>
                  <th class="text-center"> 磁盘 </th>

                  <th class="text-center"> 区域 </th>
                  <th class="text-center"> 状态 </th>
              </tr>
          </thead>
          <tbody>

            {% for asset in assets_list %}

                <tr class="gradeX">
                    <td class="text-center"> <a href="{% url "asset:detail" %}?id={{ asset.id }}">{{ asset.hostname|default_if_none:"" }}</a></td>
                    <td class="text-center"> {{ asset.ipadd |default_if_none:"" }} </td>
                    <td class="text-center"> {{ asset.cpu |default_if_none:"" }} </td>
                    <td class="text-center"> {{ asset.memory |default_if_none:"" }} </td>
                    <td class="text-center"> {{ asset.disk |default_if_none:"" }} </td>

                 <td class="text-center"> {{ asset.area|default_if_none:"" }} </td>

                    <td class="text-center">
                        {% if  asset.status ==  0 %} <a class="btn btn-xs btn-success">激活</a>
                        {% elif asset.status == 2 %}<a class="btn btn-xs btn-danger">故障</a>
                        {% else %}<a class="btn btn-xs  btn-bitbucket">停用</a>
                        {% endif %}
                    </td>

                </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

        {% if error_msg %}
            <p>{{ error_msg }}</p>
        {% endif %}


      <div class="row">
              <div class="col-sm-6">
                  <div class="dataTables_info" id="editable_info" role="status" aria-live="polite">
                      Showing {{ lines.start_index }} to {{ lines.end_index }} of {{ p.count }} entries
                  </div>
              </div>
              {% include 'paginator.html' %}
      </div>
    </div>
  </div>
</div>
</section>

{% endblock %}

{% block script %}
    <!-- SlimScroll -->
    <script src="{% static 'bower_components/jquery-slimscroll/jquery.slimscroll.min.js' %}"></script>
    <!-- FastClick -->
    <script src="{% static 'bower_components/fastclick/lib/fastclick.js' %}"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="{% static 'dist/js/demo.js' %}"></script>
    <!-- page script -->
    <script type="text/javascript">
    $(function() {
      $("#search_btn").click(function(){
          ReqtoSer();
      })
      $("#search_input").keydown(function(e){
        if(e.keyCode==13){
          ReqtoSer();
        }

      })

      function ReqtoSer(){
        var keyword = $("#search_input").val();
        window.location.href="{% url 'asset:assets' %}?keyword=" + keyword;
      }


      })

    </script>
{% endblock %}
